<template>
	<view class="">
		<bg-image />
		<top-navigation @openCallPopu = "openCallPopu"/>
		<!-- 返回键 -->

		<view class="body">
			<view class="back" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<text class="back_text">{{$t("settlement.back")}}</text>
			</view>
			<view class="bill-c">
				<view class="bill-c-title">
					{{$t("settlement.bill")}}
				</view>
				<scroll-view class="orderInfo" scroll-y="true">
					<view class="" v-for="(item , index) in Ordered" :key="index">
						<view class="menu-tab-list-item">
							<view class="menu-tab-list-item-item">
								<text class="menu-tab-list-item-title">{{$t("ShoppingCart.varietyOfDishes")}}</text>
								<text class="menu-tab-list-item-item-time">{{$t("settlement.OrderTime")}}<span
										class="time">{{item.createTime}}</span></text>
							</view>
							<view class="menu-tab-list-item-item" v-for="(item3  , index3) in item.varietyList" :key="item3.id">
								<text class="menu-tab-list-item-item-name">{{item3.showName}}</text>
								<text class="menu-tab-list-item-item-price">{{item3.actuallyMoney}}€</text>
							</view>
							<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
						</view>
						<!-- 锅底 -->
						<view class="menu-tab-list-item">
							<view class="menu-tab-list-item-item">
								<text class="menu-tab-list-item-title">{{$t("ShoppingCart.SoupBase")}}</text>
							</view>
							<view class="menu-tab-list-item-item" v-for="(item4  , index3) in item.SoupList" :key="item4.id">
								<text class="menu-tab-list-item-item-name"> {{item4.showName}}</text>
								<text class="menu-tab-list-item-item-price">{{item4.actuallyMoney}}€</text>
							</view>
							<u-divider dashed lineColor="rgba(52,52,55, 1)" :hairline="false"></u-divider>
						</view>
					</view>
					
				</scroll-view>
			</view>
			<!-- 底部 -->
			<view class="order_bot">
				<text class="order_bot_let">{{$t("settlement.ComingOverNow")}}</text>
				<text
					class="menu-tab-list-item-item-time">{{$t("ShoppingCart.common")}}{{total}}{{$t("ShoppingCart.share")}}，{{$t("ShoppingCart.amountTo")}}<span
						class="time">{{totalPrice}}€</span></text>
			</view>
			<view class="order_bot">
				<text class="order_bot_let"></text>
				<text class="menu-tab-list-item-item-time">{{$t("settlement.perCapita")}}<span
						class="time">{{averagePrice}}€</span></text>
			</view>
		</view>

		<!-- 切换语言弹框 -->
		<switch-language-popu />
		<!-- 选择桌号 -->
		<NumberPeople-popu />
		<!-- 呼叫服务员 -->
		<callTheServerPopu ref="callPopu"/>
		

	</view>
</template>

<script>
	import {
		getOrderDetailListInfo,
		SendMessage
	} from '@/common/config/api.js'
	import switchLanguagePopu from "@/components/switchLanguagePopu.vue"
	import NumberPeoplePopu from "@/components/NumberPeoplePopu.vue"
	import callTheServerPopu from "@/components/callTheServerPopu.vue"
	import
	userSoket
	from '@/js/useSocket'
	export default {
		components: {
			switchLanguagePopu,
			NumberPeoplePopu,
callTheServerPopu
		},
		mixins: [userSoket],
		data() {
			return {
				Ordered: [], // 已下单
				total: 0,
				totalPrice: 0,
				averagePrice:0
			}
		},
		onLoad() {
			this.fetch()
		},
		onShow() {
			this.initSoket()
		},
		mounted(){
			this.bus.$on("fetchFun", (v, i) => {
				this.fetch()
			});
			// 呼叫服务员
			this.bus.$on('SendMessage', (i) => {
				console.log('发送消息',i)
				this.sendingCall(i)
			})
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			fetch() {
				this.getOrderDetailListInfoFun()
			},
			//获取已下单详情
			getOrderDetailListInfoFun() {
				getOrderDetailListInfo({
					deskId: this.getDeskId()
				}).then((res) => {
					if (res.hjOrderDetailVos) {
						// 先分类区分普通菜品和锅底
						let newList = res.hjOrderDetailVos.map(item => {
							item.varietyList = []
							item.SoupList = []
							item.hjOrderDishVos.forEach(item2 => {
								if (item2.isSoup == 1) {
									item.SoupList.push(item2)
								} else {
									item.varietyList.push(item2)
								}
							})
							return item
						})
						this.Ordered = newList
						this.total = res.totalNum
						this.totalPrice = res.totalMoney
						this.averagePrice = res.average
					}
					console.log('xxx',this.Ordered)
					this.pageStatus = ''
				}).catch(() => {})
			},
			// 打开呼叫服务员弹框
			openCallPopu(){
				this.$refs.callPopu.openPopu()
			},
			sendingCall(e) {
				SendMessage(e).then((res) => {
					// this.showToast('呼叫成功')
				})
			},
			// webSoket消息处理
			soketCall(e) {
				if (e.message === '已清台') {
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
			},
			
			
			
		}
	}
</script>

<style scoped lang="scss">
	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		// background-image: url('~@/static/pageImg.png');
		// background-image:no-repeat;
		// background-size: 100% 100%;
		// width: 100vw;
		// height: 100vh;
		// position: absolute;
		// top: 0px;
		// left: 0px;
		// z-index: -1;
		color: #fff;
		// padding-top: 52px;
	}

	.bill-c {
		display: flex;
		flex-direction: column;
		width: 580px;
		border-radius: 10px;
		margin-top: 79px;
		position: relative;

		.bill-c-title {
			background-color: $qy-bg-popu-list-n-color;
			height: 52px;
			border-radius: 10px 10px 0 0;
			color: $uni-text-color;
			padding: 0 24px;
			display: flex;
			align-items: center;
			font-size: 20px;
		}

		.orderInfo {
			// width: 100%;
			background: $qy-bg-order-color;
			height: 65vh;
			padding: 16px 0px;
			border-radius: 0px 0px 10px 10px;
		}
	}

	.menu-tab-list-item-title {
		font-size: 18px;
		color: $qy-text-color-title ;
		display: flex;
		flex: 1;
	}

	.menu-tab-list-item {
		margin: 0 24px;

		// width: 100%;
		.menu-tab-list-item-item {
			display: flex;
			padding: 12px 0px;

			// margin-left: 8px;
			// margin: 8px auto;
			.menu-tab-list-item-item-name {
				color: $uni-text-color;
				font-size: 16px;
				display: flex;
				flex: 1;
			}

			.menu-tab-list-item-item-price {}
		}

		.menu-tab-list-item-item-time {
			color: $uni-text-color-placeholder;
			font-size: 16px;

			.time {
				color: $uni-text-color;
			}
		}
	}

	.order_bot {
		z-index: 2;
		display: flex;
		margin-top: 16px;
		width: 580px;

		.order_bot_let {
			display: flex;
			flex: 1;
			margin: 0px auto;
			color: $qy-order-bot-waiter;
			font-size: 18px;
		}

		.menu-tab-list-item-item-time {
			color: $uni-text-color-placeholder;
			font-size: 16px;

			.time {
				color: $uni-text-color;
				font-size: 20px;
			}
		}
	}

	.back {
		// width: 60px;
		// height: 36px;
		padding: 8px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: $uni-text-color;
		background: $qy-bg-order-color;
		position: absolute;
		left: 32px;
		top: 79px;
		border-radius: 10px;

		.back_text {
			margin-left: 6px;
			font-size: 14px;
			color: $uni-text-color-inverse;
		}
	}
</style>